<template>
  <div class="col">
    <!-- .prevent：取消form提交后跳转新的页面 -->
    <form style="padding-top: 50px;padding-left: 50px" @submit.prevent="addComments">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" class="form-control" id="username" placeholder="请输入用户名..." v-model="username">
      </div>
      <div class="form-group">
        <label for="commentContent">评论内容:</label>
        <input type="text" class="form-control" id="commentContent" placeholder="请输入评论内容..." v-model="content">
      </div>
      <button type="submit" class="btn btn-primary">发表评论</button>
    </form>
  </div>
</template>

<script>
  export default {
    //方式二：接收标签上绑定的comments属性,以数组的形式接收
    props: [
      'comments'
    ],
    name: "Left",
    data() {
      return {
        username: "",
        content: ""
      }
    },
    methods: {
      addComments() {
        const name = this.username.trim();
        const cont = this.content.trim();
        if (name == null || cont == null) {
          alert("请输入用户名和评论内容...")
        }
        var comment = {"username": name, "content": cont};
        //想数组最前面添加元素
        this.comments.unshift(comment)
      }
    }
  }
</script>

<style scoped>

</style>
